import React from 'react';
import { connect } from 'dva';
import { Icon } from 'react-fa';
import SiderMenu, { formatterData } from '@/components/SiderMenu';

const getMenuRoutes = (...args) => formatterData(...args);

@connect(({ app: { user = {} } }) => ({ user }))
class SimplePanel extends React.Component {
  render() {
    const {
      user: { authorities = [] },
      // match,
      children,
      route: { title, name, routes },
      ...props
    } = this.props;
    const menu = getMenuRoutes(routes, authorities);
    return (
      <div className="x-layout">
        <div className="x-side">
          <div className="x-title">
            <h2>
              <Icon name="flag" />
              {title || name}
            </h2>
          </div>
          <div className="x-nav">
            <SiderMenu {...props} menu={menu} subMenu={true}></SiderMenu>
          </div>
        </div>
        <div className="x-main">{children}</div>
      </div>
    );
  }
}

export default SimplePanel;
